<template>
  <!-- <div class="sidebar">
    <el-menu
      :default-active="activeIndex"
      router
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="/dashboard" >
        <i class="el-icon-service"></i>
        <span slot="title">Dashboard</span>
      </el-menu-item>
      <el-submenu index="/charts">
        <template slot="title">
          <i class="el-icon-view"></i>
          <span slot="title">Charts</span>
        </template>
        <el-menu-item index="/charts/diagram">Diagram</el-menu-item>
        <el-menu-item index="/charts/slider">Slilder</el-menu-item>
      </el-submenu>
      <el-submenu index="/tables">
        <template slot="title">
          <i class="el-icon-location-outline"></i>
          <span slot="title">Tables</span>
        </template>
        <el-menu-item index="/tables/list">Example</el-menu-item>
      </el-submenu>
      <el-menu-item index="/setting" >
        <i class="el-icon-setting"></i>
        <span slot="title">Setting</span>
      </el-menu-item>
    </el-menu>
  </div> -->
  <div class="sidebar">
    <el-menu
      class="el-menu-vertical-demo"
      :default-active="$route.path"
      :collapse-transition="false"
      router
      :default-openeds="openeds"
      :collapse="isCollapse"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      ref="menuRef"
      unique-opened
    >
      <!-- @select="selectMenuTab" -->
      <template v-for="(item) in items"  v-if="Invoking.ifFunctionCode(item.show)">
        <template v-if="item.subs">
          <el-submenu :index="item.index" :key="item.index">
            <template slot="title">
              <!-- <i :class="item.icon"></i> -->
              <img :src="item.imgs" alt />
              <!-- <span>{{item.imgs}}</span> -->
              <span slot="title">{{ item.title }}</span>
            </template>
            <el-menu-item
              v-for="(subItem,i) in item.subs"
              :key="i"
              :index="subItem.index"
              v-if="Invoking.ifFunctionCode(subItem.show)"
            >{{ subItem.title }}</el-menu-item>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon" v-if="!item.imgs"></i>
            <img :src="item.imgs" alt />
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
    <div class="copyright" v-if="sidebar.opened">Copyright © 湖南众益文化传媒股份有限公司</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Sidebar',
   props: {
    curItemData: {
      required: true,
    },
  },
  data () {
    return {
      openeds:[],
         items: [
       /*  {
          icon: "",
          index: "/index",
          title: "首页",
          show: "index",
          imgs: require("@/assets/images/icon_l1_03.png"),
        }, */
         {
          icon: "",
          index: "12",
          title: "首页",
          show: "index",
          imgs: require("@/assets/images/icon_l1_03.png"),
          subs: [
             {
              index: "/index",
              title: "首页列表",
              show: "index",
            },
             {
              index: "/index_list",
              title: "首页报表",
              show: "index",
            },
          ],
        },
        {
          icon: "el-icon-date",
          index: "1",
          title: "素材管理",
          show: "material:selectPage",
          imgs: require("@/assets/images/icon_l2_03.png"),
          subs: [
            {
              index: "/material",
              title: "素材维护",
              show: "material:selectPage",
            },
          ],
        },
        {
          icon: "el-icon-date",
          index: "2",
          title: "节目管理",
          show: "program:selectPage#program:saveProgram",
          imgs: require("@/assets/images/icon_l3__03.png"),
          subs: [
            {
              index: "/safeguard",
              title: "节目维护",
              show: "program:selectPage",
            },
            {
              index: "/fabrication",
              title: "节目制作",
              show: "program:saveProgram",
            },
          ],
        },
        {
          icon: "el-icon-date",
          index: "3",
          title: "终端管理",
          show: "mediaAttribute:selectPage#mediaAttribute:selectPage_2#pTask:selectPage#syncGroup:selectPage",
          imgs: require("@/assets/images/icon_l4_03.png"),
          subs: [
            {
              index: "/TerminalManagement",
              title: "终端发布",
              show: "mediaAttribute:selectPage",
            },
            {
              index: "/terminalMaintenance",
              title: "终端维护",
              show: "mediaAttribute:selectPage_2",
            },
            {
              index: "/publishTaskList",
              title: "发布任务",
              show: "pTask:selectPage",
            },
            {
              index: "/SyncGroupManage",
              title: "同步组维护",
              show: "syncGroup:selectPage",
            }
          ],
        },{
          icon: "el-icon-date",
          index: "9",
          title: "终端监播",
          show: "monitor:selectMonitorPage",
          imgs: require("@/assets/images/icon_l4_03.png"),
          subs: [
            {
              index: "/monitScreen",
              title: "终端云屏",
              show: "monitor:selectMonitorPage",
            }
          ],
        },
        {
          icon: "el-icon-date",
          index: "4",
          title: "LED管理",
          show: "ledText:selectPage#mediaAttribute:selectLedPage",
          imgs: require("@/assets/images/icon_l5_03.png"),
          subs: [
            {
              index: "/ledManage",
              title: "LED节目素材",
              show: "ledText:selectPage",
            },
            {
              index: "/ledRelease",
              title: "LED发布",
              show: "mediaAttribute:selectLedPage",
            },
          ],
        },
        {
          icon: "el-icon-date",
          index: "5",
          title: "客户管理",
          show: "memberOrders:selectPage",
          imgs: require("@/assets/images/icon_l6_03.png"),
          subs: [
            {
              index: "/clientManagement",
              title: "客户订单",
              show: "memberOrders:selectPage",
            },
          ],
        },
        {
          icon: "el-icon-date",
          index: "6",
          title: "用户管理",
          show:"sysUser:selectPage#ftpInfo:selectPage#roles:selectPage",
          imgs: require("@/assets/images/icon_l7_03.png"),
          subs: [
            {
              index: "/systemUser",
              title: "系统用户管理",
              show: "sysUser:selectPage",
            },
            {
              index: "/ftpUserManagement",
              title: "FTP用户管理",
              show: "ftpInfo:selectPage",
            },
            {
              index: "/oleManagement",
              title: "角色管理",
              show: "roles:selectPage",
            },
          ],
        },
        {
          icon: "el-icon-bell",
          index: "11",
          title: "消息管理",
          show:"messageM:selectPage#userNotify:selectPage",
          imgs:require("@/assets/images/icon_l3__03.png"),
          subs: [
            {
              index: "/systemNotice",
              title: "系统公告",
              show: "messageM:selectPage",
            }
            ,{
              index: "/messageNotify",
              title: "我的消息",
              show: "userNotify:selectPage",
            }
          ],
        },
        {
          icon: "el-icon-date",
          index: "7",
          title: "日志管理",
          show: "runLog:pageStatisticsRunLog#playLog:pageStatisticsPlayTime",
          imgs: require("@/assets/images/icon_l8_03.png"),
          subs: [
            {
              index: "/runningLog",
              title: "运行日志",
              show: "runLog:pageStatisticsRunLog",
            },
            {
              index: "/palyLog",
              title: "播放日志",
              show: "playLog:pageStatisticsPlayTime",
            },
          ],
        },
        {
          icon: "el-icon-date",
          index: "8",
          title: "统计",
          imgs: require("@/assets/images/icon_l9_03.png"),
          show: "workDate:selectPage",
          subs: [
            {
              index: "/runTheStatistical",
              title: "运行统计",
              show: "workDate:selectPage",
            },
          ],
        },
        /* {
          icon: "el-icon-setting",
          index: "/systemproperty",
          title: "系统设置",
          show: "sysUser:selectPage",
        }, */
        /*  {
          icon: "el-icon-date",
          index: "10",
          title: "区块链",
          show: "blockchain:selectChainTypePage",
          imgs: require("@/assets/images/icon_l4_03.png"),
          subs: [
            {
              index: "/blockchainList",
              title: "区块链列表",
              show: "blockchain:selectChainTypePage",
            }
          ],
        }, */
        /* {
          icon: "el-icon-setting",
          index: "11",
          title: "巡检管理",
          imgs: require("@/assets/images/icon_l9_03.png"),
          show: "taskGroup:selectPage",
          subs: [
            {
              index: "/inspection",
              title: "巡检",
              show: "taskGroup:selectPage",
            },
          ],
        } */
        {
          icon: "el-icon-data-analysis",
          index: "/inspection",
          title: "巡检",
          show: "taskGroup:selectPage",
        },
      ],
       closeNum: "",
      // 选中数据
      selectMenuNum: [],
      openeds: [],
    }
  },

  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    isCollapse () {
      return !this.sidebar.opened
    },
    activeIndex () {
      const thisRoutPath = this.$route.path
      if (this.$route.name === 'details') {
        return '/tables/details'
      }
      return thisRoutPath
    }
  },
  created() {
    if(!sessionStorage.getItem('functionCode')){
      this.$router.push({
        path: '/login'
     })
    }
    this.selectMenuNum = [];
    // this.getSelectUserPermission();
  },
    watch: {
    $route() {
        if (this.$route.path == "/index" || this.$route.path == "/inspection") {
        this.$refs.menuRef.closeMenu(this.closeNum);
        this.openeds = [];
        // this.selectMenuNum = [];
      }
    },
    curItemData(val) {

      if (val.length > 0) {
        this.$refs.menuRef.closeMenu(this.closeNum);
        this.selectMenuNum.forEach((element) => {
          if (element.path == val[0].path) {
            this.$refs.menuRef.openMenu(element.index);
          }
        });
      } else {
        this.closeNum = "";
        this.selectMenuNum = [];
      }
    },
  },
  methods: {

    openMenuTab(key) {
      this.closeNum = key;
    },
    selectMenuTab(index, path) {
      this.selectMenuNum.push({ index: path[0], path: path[1] });
    },
  }
}
</script>

<style scoped>

.copyright{
    /* position: re; */
    /* bottom: 20%; */
    text-align: center;
    padding: 0 10px;
    line-height: 23px;
    font-size: 14px;
    color: #fff;
    height: 10vh;
    width: 180px;
    border-right:1px solid #fff
}

.el-submenu img,
  .el-menu-item img{
      margin-right: 8px;
  }
  .sidebar {
    background-color: rgb(84, 92, 100);
    /* overflow:hidden */
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 80vh;

    /* height: 100%; */
  }

  .el-menu-vertical-demo {
    height: 80vh;
    /* height: 100%; */
    overflow-y: scroll;
  }
.el-menu-vertical-demo::-webkit-scrollbar {
  display: none;
}
  .el-menu-item.is-active,
  .el-submenu.is-active >>> .el-submenu__title {
    background: #484e5c !important;
  }

  .el-submenu .el-menu-item {
    padding-left: 60px !important;
    min-width: auto;
  }
  .el-submenu.is-active .el-menu-item {
    background: #484e5c !important;
  }
  .el-submenu.is-active .el-menu-item.is-active  {
    background: #3a4046 !important;
  }
  .el-submenu .el-menu-item:hover {
    padding-left: 60px !important;
    background: rgb(67, 74, 80) !important;
  }
  .el-menu-item i {
    padding-bottom: 4px;
  }

  .el-submenu__title i {
    padding-bottom: 4px;
  }

  @media all and (max-width: 768px) {
    .el-menu--collapse {
      width: 0;
      overflow: hidden;
    }
  }


</style>
